<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <div class="toHome" @click="toHome">
        <van-icon name="wap-home-o" />
      </div>
      <div class="wyyx">网易严选</div>
      <div class="toSearch" @click="toSearch">
        <van-icon name="search" />
      </div>
      <div class="toBuy" @click="toCart">
        <van-icon name="shopping-cart-o" />
      </div>
    </div>
    <!-- logo大图 -->
    <div class="bigLogo" @click="test">
      <img class="bigImg" src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="" />
    </div>
    <!-- 登录按钮 -->
    <div class="login" @click="toLogin">
      <div class="loginIcon">
        <van-icon name="idcard" />
      </div>
      <div class="loginText">点击此处登录</div>
    </div>
    <!-- 注册按钮 -->
    <div class="reg">
      <div class="regIcon">
        <van-icon name="envelop-o" />
      </div>
      <div class="regText" @click="toRegister">点击注册账号</div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <img class="footerImg" src="@/views/center/images/qq.jpg" alt="" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'notlogin'
})
</script>
<script setup lang="ts">
import { useRouter } from 'vue-router'

import pinia from '@/stores'
import { useCategoryStore } from '@/stores/modules/center'
const userInfoStore = useCategoryStore(pinia)

const router = useRouter()

// 测试
const test = () => {
  userInfoStore.getUserInfo()
}

// 去登录
const toLogin = () => {
  router.push('/login')
}
// 去注册
const toRegister = () => {
  router.push('/register')
}
// 去主页
const toHome = () => {
  router.push('/home')
}
// 去购物车
const toCart = () => {
  router.push('/shopCart')
}
// 去搜索
const toSearch = () => {
  router.push('/search')
}
</script>
<style scoped lang="less">
.container {
  height: 100vh;
  background-color: #f2f5f4;
  .header {
    height: 44px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(229, 229, 229);
    box-sizing: border-box;
    .toHome {
      width: 24px;
      height: 24px;
      margin: 0 15px;
    }
    .wyyx {
      height: 27px;
      line-height: 27px;
      text-align: center;
      font-size: 20px;
      margin: 0 auto;
      font-weight: 999;
    }
    .toBuy {
      margin: 0 15px;
    }
  }
  .bigLogo {
    margin: auto;
    margin-top: 80px;
    width: 134px;
    height: 45px;
    .bigImg {
      width: 100%;
      height: 100%;
    }
  }
  .login {
    width: 90%;
    height: 47px;
    background-color: rgb(221, 26, 33);
    border-radius: 3px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 50px;
    .loginText {
      font-size: 15px;
      margin-left: 15px;
    }
  }
  .reg {
    width: 90%;
    height: 47px;
    background-color: rgb(242, 245, 244);
    border-radius: 3px;
    color: rgb(221, 26, 33);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 20px;
    border: 1px solid rgb(221, 26, 33);
    box-sizing: border-box;
    .regText {
      font-size: 15px;
      margin-left: 15px;
    }
  }
  .footer {
    width: 293px;
    height: 41px;
    margin: auto;
    margin-top: 230px;
    .footerImg {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
